<template>
  <div>
    <el-card class="card_box_mall">

      <!--搜索栏 -->
      <el-row style="margin-bottom: 10px;">
        <el-col :span="24">
          <el-form
              ref="searchForm"
              :inline="true"
              :model="searchForm"
              label-width="90px"
              class="search-form">

            <el-form-item>
              <el-input placeholder="请输入美食名称" v-model="searchForm.text" style="width: 280px;" size="small">
                <i slot="suffix" class="el-input__icon el-icon-search"
                   @click="getMallCommodityByText()"></i>
              </el-input>
            </el-form-item>

            <el-form-item>
              <el-button type="danger" @click="getMallAllCommodity">获取全部美食</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>

      <!--无限滚动-->
      <div style="height:650px;" class="scrollbar">
        <el-scrollbar style="height:100%">

          <!--轮播图-->
          <el-carousel :interval="4000" type="card" height="280px">

            <el-carousel-item v-for="item in carouselList" :key="item">
              <el-row>

                <!--左卡片-->
                <el-col :span="14">
                  <el-card class="left_card_carousel" shadow="never">
                    <div>
                      <el-image
                          style="width: 100%; height: 250px; margin: 0px;"
                          :src="handlerImg(item.picture)"
                          fit="fill"></el-image>
                    </div>
                  </el-card>
                </el-col>

                <!--右卡片-->
                <el-col :span="10">
                  <el-card class="right_card_carousel" shadow="never">
                    <span>{{ item.text }}</span><br>
                    <span style="font-size: 18px;color: #F56C6C;font-weight:bold;">￥{{ item.price }}</span>
                    <el-divider></el-divider>
                    <el-row style="margin-top: 0px">
<!--                      <el-col :span="12">-->
<!--                        <span>餐厅名称</span>-->
<!--                      </el-col>-->

                      <el-col :span="24">
                        <span @click="goToFoodInformation(item.userId,item.restaurantName)" style="font-size: 20px;font-weight: bold">{{ item.restaurantName }}</span>
                      </el-col>
                    </el-row>

                    <el-row style="margin-top: 10px">
                      <el-col :span="12">
                        <span>美食评分</span>
                      </el-col>

                      <el-col :span="12">
<!--                        <el-rate-->
<!--                            v-model="item.appraiseScore"-->
<!--                            disabled-->
<!--                            show-score-->
<!--                            text-color="#ff9900">-->
<!--                        </el-rate>-->
                        <span style="color: #FFD700">{{item.appraiseScore}}星</span>
                      </el-col>
                    </el-row>

                    <el-row style="margin-top: 16px">
                      <el-col :span="12">
                        <span>库存</span>
                      </el-col>

                      <el-col :span="12">
                        <span>{{ item.saleCount }}</span>
                      </el-col>
                    </el-row>

                    <el-row style="margin-top: 10px">
                      <el-col :span="12">
                        <span>历史销量</span>
                      </el-col>

                      <el-col :span="12">
                        <span>{{ item.historicalSaleCount }}</span>
                      </el-col>
                    </el-row>

                    <el-row style="margin-top: 10px">
                      <el-col :span="12">
                        <span>购买人数</span>
                      </el-col>
                      <el-col :span="12">
                        <span>{{ item.peopleBuy }}</span>
                      </el-col>
                    </el-row>
                  </el-card>
                </el-col>
              </el-row>
            </el-carousel-item>

          </el-carousel>

          <!--放你需要滚动条的内容-->
          <div>
            <el-timeline v-for="i in commodityList" :key="i">
              <el-timeline-item>

                <!--美食展示-->
                <el-row>
                  <!--左卡片-->
                  <el-col :span="6">
                    <el-card class="left_card_timeline" shadow="hover">
                      <el-button type="text" @click="goToFoodInformation(i.id,i.restaurantName)" style="width: 100%;">
                        <div>
                          <el-image
                              style="width: 100%; height: 220px; margin: -20px;"
                              :src="handlerImg(i.picture)"
                              fit="fill"></el-image>
                        </div>
                      </el-button>
                    </el-card>
                  </el-col>

                  <!--右卡片-->
                  <el-col :span="18">
                    <el-card class="right_card_timeline" shadow="hover">
                      <el-row>
                        <el-col :span="4">
                          <h3 style="display: inline-block;font-size: 20px;">餐厅名称</h3>
                        </el-col>

                        <el-col :span="7" style="margin-top: 8px">
                          <el-button type="text" @click="goToFoodInformation(i.id,i.restaurantName)" style="float: left;text-decoration: none;font-size: 30px;color: #F56C6C;display: inline-block">
                            {{ i.restaurantName }}
                          </el-button>
                        </el-col>

<!--                        <el-col :span="4">-->
<!--                          <h3 style="display: inline-block"> 配送费 </h3>-->
<!--                        </el-col>-->

<!--                        <el-col :span="6">-->
<!--                          <span style="font-size: 30px;color: #F56C6C;font-weight:bold; display: inline-block">￥{{ i.deliveryCost }}</span>-->
<!--                        </el-col>-->
                      </el-row>

                      <el-row>
                        <el-col :span="4">
                          <h3 style="display: inline-block;font-size: 20px;"> 评价分数 </h3>
                        </el-col>

                        <el-col :span="7" style="margin-top: 24px;">
                          <el-rate
                              v-model="i.appraiseScore"
                              disabled
                              show-score
                              text-color="#ff9900">
                          </el-rate>
                        </el-col>

                        <el-col :span="4">
                          <h3 style="display: inline-block;font-size: 20px;"> 好评率 </h3>
                        </el-col>

                        <el-col :span="7" style="margin-top: 23px;">
                          <div v-if="i.peopleBuy!==0 && i.goodComment!==0">
                            <el-tag type="" size="mini" v-if="goodCommentRate(i)>0 && goodCommentRate(i)<=20">
                              <span style="font-size: 20px;color: #FF0000;display: inline-block">{{ goodCommentRate(i) }}</span>
                              <span style="font-size: 20px;color: #FF0000;display: inline-block">%</span>
                            </el-tag>

                            <el-tag type="success" size="mini" v-if="goodCommentRate(i)>20 && goodCommentRate(i)<=40">
                              <span style="font-size: 20px;color: #B0171F;display: inline-block">{{ goodCommentRate(i) }}</span>
                              <span style="font-size: 20px;color:#B0171F ;display: inline-block">%</span>
                            </el-tag>

                            <el-tag type="info" size="mini" v-if="goodCommentRate(i)>40 && goodCommentRate(i)<=60">
                              <span style="font-size: 20px;color: #E3170D;display: inline-block">{{ goodCommentRate(i) }}</span>
                              <span style="font-size: 20px;color: #E3170D;display: inline-block">%</span>
                            </el-tag>

                            <el-tag type="danger" size="mini" v-if="goodCommentRate(i)>60 && goodCommentRate(i)<=80">
                              <span style="font-size: 20px;color: #E6A23C;display: inline-block">{{ goodCommentRate(i) }}</span>
                              <span style="font-size: 20px;color: #E6A23C;display: inline-block">%</span>
                            </el-tag>

                            <el-tag type="warning" size="mini" v-if="goodCommentRate(i)>80 && goodCommentRate(i)<100">
                              <span style="font-size: 20px;color: #ED9121;display: inline-block">{{ goodCommentRate(i) }}</span>
                              <span style="font-size: 20px;color: #ED9121;display: inline-block">%</span>
                            </el-tag>

                            <el-tag type="primary" size="mini" v-if="goodCommentRate(i)===100">
                              <span style="font-size: 20px;color: #67C23A;display: inline-block">{{ goodCommentRate(i) }}</span>
                              <span style="font-size: 20px;color: #67C23A;display: inline-block">%</span>
                            </el-tag>
                          </div>
                        </el-col>
                      </el-row>

                      <el-row style="margin-top: 5px;">
                        <el-col :span="4">
                          <h3 style="display: inline-block;font-size: 20px;">购买人数</h3>
                        </el-col>
                        <el-col :span="7" style="margin-top: 20px;">
                          <span style="font-size: 20px;color: #000;display: inline-block">{{ i.peopleBuy }}</span>
                        </el-col>

                        <el-col :span="4">
                          <h3 style="display: inline-block;font-size: 20px;">历史销量</h3>
                        </el-col>
                        <el-col :span="7" style="margin-top: 20px;">
                          <span style="font-size: 20px;color: #000;display: inline-block">{{ i.historicalSaleCount }}</span>
                        </el-col>
                      </el-row>

<!--                      <el-row style="margin-top: 5px">-->
<!--                        <el-col :span="4">-->
<!--                          <h3 style="display: inline-block">配送距离</h3>-->
<!--                        </el-col>-->

<!--                        <el-col :span="6">-->
<!--                          <span style="font-size: 20px;color: #000;display: inline-block">{{ i.distance }}m</span>-->
<!--                        </el-col>-->
<!--                      </el-row>-->

                    </el-card>
                  </el-col>
                </el-row>

              </el-timeline-item>
            </el-timeline>
          </div>
        </el-scrollbar>
      </div>

    </el-card>
  </div>


</template>

<script>
import {
  selectCommodityByCarousel,
  selectMallAllMerchant,
  selectMallCommodityByText,
} from "@/api/mall/mall";
import {setRestaurantInformation} from "@/api/website/restaurant";

export default {

  name: "Commodity",

  data() {
    return {

      carouselList: [],//轮播图列表

      commodityList: [],//餐厅列表

      /**
       * 搜索内容
       */
      searchForm: {
        text: '',//美食名称
      },
    }
  },

  methods: {
    /**
     * 获取所有轮播图餐厅
     */
    getCarouselList() {
      selectCommodityByCarousel().then(res => {
        this.carouselList = res.commodities;
      }).catch(()=>{
        this.$message.error("error");
      })
    },

    /**
     * 获取全部餐厅
     */
    getMallAllCommodity() {
      selectMallAllMerchant().then(res => {
        this.commodityList = res.restaurants;
        let total = res.total;

        this.$message.info("餐厅总数量：" + total);
      }).catch(()=>{
        this.$message.error("error");
      })
    },

    /**
     * 根据美食名称查询美食
     */
    getMallCommodityByText() {

      if (this.searchForm.text === '') {
        this.$message.warning("请输入美食名称");
        this.commodityList = [];
      } else {
        const formData = new FormData();
        formData.append("text", this.searchForm.text);

        selectMallCommodityByText(formData).then(res => {
          this.commodityList = res.restaurants;

          let total = res.total;
          this.$message.info("查询有关《" + this.searchForm.text + "》的餐厅数量：" + total);

          this.searchForm.text = '';
        }).catch(()=>{
          this.$message.error("error");
        })
      }

    },

    /**
     * 展示图片
     */
    handlerImg(picture){
      console.log("data:image/jpeg;base64," + picture)
      return "data:image/jpeg;base64," + picture
    },

    /**
     * 好评率
     */
    goodCommentRate(i) {
      return Math.floor((i.goodComment / i.peopleBuy) * 10000) / 100;
    },

    /**
     * 跳转至当前餐厅详细界面,并传递当前餐厅的餐厅id
     */
    goToFoodInformation(id,restaurantName){
      setRestaurantInformation(id);
      this.$router.push({
        name:"restaurantWebsiteInformation",
        params:{restaurantId:id,restaurantName:restaurantName}
      });
    }

  },

  created() {
    this.getCarouselList();
    this.getMallAllCommodity();
  }

}
</script>

<style lang="less">
.card_box_mall {
  height: 85vh;
  padding-top: 20px;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 25px;
  opacity: 0.75;
  line-height: 100px;
  margin: 0;
}

.el-carousel__item:nth-child(n) {
  background-color: #d3dce6;
}

.left_card_carousel {
  width: 100%;
  height: 280px;
  background-color:aliceblue;
}

.right_card_carousel {
  height: 280px;
  background-color: aliceblue;
}

.left_card_timeline {
  width: 100%;
  height: 240px;
  background-color: #d3dce6;
}

.right_card_timeline {
  height: 240px;
  background-color: aliceblue;
}

.card_commodity_carousel {
  width: 200px;
  height: 270px;
  margin-left: 30px;
  margin-top: 30px;
}

/* el-divider 修改高度&虚线效果 */
div[class="el-divider el-divider--horizontal"]{
  margin: 5px 0;
  background-color: #DCDFE6;
  //border-top: 1px dashed #e8eaec;
}
</style>
